<template>
	<div class="flex">
		<!-- 画布 -->
		<div class="w-full">
			<drawingCenter ref="drawingCenterRef" style="min-height: calc(100vh - 72px)" />
		</div>
	</div>
</template>

<script setup>
	import drawingCenter from '@/views/plugin/dashboard/view/design/component/drawingCenter/index.vue'
	import { designStore } from '@/views/plugin/dashboard/store'
	import { onMounted, ref } from 'vue'

	const props = defineProps({
		dashboardDetail: {
			type: Object,
			default: () => {}
		}
	})
	const useDesignStore = designStore()
	const drawingCenterRef = ref(null)
	// 设置模式为展示模式
	const mode = 'show'
	useDesignStore.mode = mode

	// 仪表盘信息
	const dashboardInfo = ref({
		name: '',
		updateTime: ''
	})

	// 获取仪表盘详情
	const getDashboardInfo = async () => {
		if (props.dashboardDetail && props.dashboardDetail.dsConfig) {
			try {
				const sourceData = JSON.parse(props.dashboardDetail.dsConfig)
				if (
					sourceData.refreshInterval &&
					sourceData.refreshInterval.length > 0 &&
					drawingCenterRef.value.onReload &&
					typeof drawingCenterRef.value.onReload === 'function'
				) {
					setInterval(() => {
						drawingCenterRef.value.onReload()
					}, sourceData.refreshInterval * 1000)
				}
				if (Array.isArray(sourceData.canvasSourceData)) {
					useDesignStore.canvasSourceData = sourceData.canvasSourceData
				} else {
					useDesignStore.canvasSourceData = []
				}
			} catch (error) {
				console.log('error', error)
				useDesignStore.canvasSourceData = []
			}
			dashboardInfo.value = props.dashboardDetail
		}
	}

	watch(
		() => props.dashboardDetail,
		(newVal) => {
			if (newVal) {
				getDashboardInfo()
			}
		},
		{ immediate: true }
	)

	// 页面加载时获取仪表盘详情
	onMounted(() => {
		useDesignStore.getDataSource()
		getDashboardInfo()
	})
</script>
<style scoped lang="less">
	:deep(.ant-card-body) {
		padding: 0 24px 0 24px;
	}
</style>
